import Link from "next/link";
import Image from "next/image";
import Router from "next/router";
import React from "react";
import styles from "../styles/Index.module.css";
const logoSvg = require("/static/undraw_setup_analytics_re_foim.svg")

import { isLogin, logout, loginUserPhone } from "../components/user.js";
import {makeStyles, withStyles} from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import {useHover} from "ahooks";


// 基于materialui的button自定义的button
const ColorButton = withStyles((theme) => ({
  root: {
    fontSize: 20,
    marginRight: 5
  }
}))(Button);

const LoginButton = withStyles({
  root: {
    background: "#ff9800",
    borderRadius: 10,
    border: 0,
    color: "white",
    height: 46,
    fontSize: 18,
    width: 120,
    boxShadow: "0 3px 5px 2px rgba(50, 189, 254, .3)",
    "&:hover": {
      backgroundColor: "#ff9799"
    }
  }
})(Button);

export default function IndexPage() {
  const useStyles = makeStyles({
    picContainer:{
      width: "100%",
      background: "#FCFCFC",
      height: "630px",
        paddingTop:35
    },
  containerMiddle :{
      maxWidth: "1280px",
      height: "100%",
      margin: "0 auto",
    },
  containerMiddleItem1: {
      width: "38%",
      height: "100%",
      float: "left",
      marginLeft: "5px",
    },
  containerMiddleItem2: {
      width: "60%",
      height: "100%",
      float: "left",
      marginLeft: "5px",
      paddingTop: 20
    },
  welcome:{
      marginTop: "200px"
    },
  welcomeSpan1:{
      fontFamily: "JetBrains Mono",
      fontWeight: "bolder",
      fontSize: "40px",
      marginLeft: "10px",
    },
  welcomeSpan2: {
      fontFamily: "JetBrains Mono",
      fontWeight: "bold",
      fontSize: "25px",
      color: "#2ECA9A",
      marginLeft: "5px"
    },
  welcome2: {
      color: "#8492A6",
      fontFamily: "JetBrains Mono",
      marginTop: "35px",
      fontWeight: "bold",
      fontSize: "20px",
      paddingLeft: "10px"
    },
  welcome3Action: {
      marginTop: "35px",
      height: "50px"
    },
  welBtn1: {
      borderRadius: "5px",
      width: "150px",
      height: "100%",
      marginLeft: "18px",
      marginTop: "5px",
      backgroundColor: "#2F55D4",
      color: "white",
      fontSize: "18px",
      fontFamily: "Microsoft YaHei UI",
      fontWeight: "bolder",
    },
  welBtn1Span:{
      marginRight: "10px"
    },
  welBtn2: {
      borderRadius: "5px",
      width: "150px",
      height: "100%",
      marginLeft: "18px",
      marginTop: "5px",
      color: "#2F55D4",
      backgroundColor: "white",
      fontSize: "18px",
      fontFamily: "Microsoft YaHei UI",
      fontWeight: "bolder",
      border: "2px solid #767676"
    },
  showVersion: {
      color: "#8492A6",
      fontFamily: "JetBrains Mono Light",
      marginTop: "20px",
      fontWeight: "bold",
      fontSize: "16px",
      paddingLeft: "10x",
      marginLeft: "20px"
    },
  welcomeSvg: {
      width: "100%",
      height: "100%"
    },
      loginButtion:{
          color: "#2F55D4",
          fontSize: "20px",
          marginTop: 5,
          fontWeight: "bold",
          marginLeft: 60
      },
      centralContainer: {
           height:"100%",
          width:"1180px",
          display: "flex"
    },
      guluContainer: {
          height: "100%",
          width: "10%",
          display: "flex",
          justifyContent: "center",
          alignItems: "center"
      },
      buttonsContainer: {
          height: "100%",
          width: "60%",
          marginLeft: "10px",
          display: "flex",
          justifyContent: "center",
          alignItems: "center"
      },
      link:{
          fontWeight: "bold",
          fontSize: "16px",
          marginLeft: "20px"
      }

  });
  const indexStyles = useStyles();


  // 从 ../components/user.js 引入
  const handleLogout = () => {
    logout();
    location.reload();
  };

  const toLogin = () => {
      if (isLogin()) {
          Router.push("/functions");
      } else {
          // 跳转到登录页面
          Router.push("/login");
      }
  };

  // 导航栏显示登录按钮还是 用户名和注销按钮
  let button = null;
  if (isLogin()) {
    button = (
      <div className={styles.login_place}>
        <ColorButton>{loginUserPhone()}</ColorButton>
        <LoginButton onClick={handleLogout}>
          <span>注销</span>
        </LoginButton>
      </div>
    );
  } else {
    button = (
      <div className={styles.login_place}>
          <Button className={indexStyles.loginButtion} onClick={toLogin}>登录</Button>
        {/*<LoginButton onClick={toLogin}>
        </LoginButton>*/}
      </div>
    );
  }
  return (
    <div>
      <div className={styles.nav}>
          <div className={indexStyles.centralContainer}>
              <div className={indexStyles.guluContainer}>
                  <Image
                      src="/static/gulu.png"
                      alt="Picture of the author"
                      width={68.5}
                      height={36.5}
                  />
                  {/*<span style={{color:"#2F55D4", fontSize: 25, fontWeight: "bold"}}> Gulu</span>*/}
              </div>
              <div className={indexStyles.buttonsContainer}>
                  <Button href="#" className={indexStyles.link}>
                      首页
                  </Button>
                  <Button href="#" className={indexStyles.link}>
                      名师论坛
                  </Button>
                  <Button href="#" className={indexStyles.link}>
                      医学问答
                  </Button>
                  <Button href="#" className={indexStyles.link}>
                      团体方案
                  </Button>
                  <Button href="/about" className={indexStyles.link} >
                      关于
                  </Button>
              </div>
              {button}
          </div>
      </div>

      <div className={indexStyles.picContainer}>
        <div className={indexStyles.containerMiddle}>
          <div className={indexStyles.containerMiddleItem1}>
                <div className={indexStyles.welcome}><span className={indexStyles.welcomeSpan1}>Gulu </span><span className={indexStyles.welcomeSpan2}>[guːˈluː]</span></div>
                <div className={indexStyles.welcome2}>一款方便快捷的云端医疗助手，值得一试</div>
                <div className={indexStyles.welcome3Action}>
                  <Button className={indexStyles.welBtn1} onClick={toLogin}><span>⚡</span>即刻开始</Button>
                  <Button className={indexStyles.welBtn2}>关于我们</Button>
               </div>
                <div className={indexStyles.showVersion}>当前版本: v1.0.0</div>
          </div>
          <div className={indexStyles.containerMiddleItem2}>
              <Image
                  src="/static/main3.png"
                  alt="Picture of the author"
                  width={869}
                  height={594}
              />
          </div>
        </div>
        </div>
    </div>
        );

}
